<template>
    <div class="dashboard-content" style="">

        <el-form :inline="true" :model="ruleForm">
            <div class="dashboard-btn-wrap">
                <el-form-item label="商品名称">
                    <el-input  v-model="ruleForm.productName" clearable style="width: 187px;"></el-input>
                </el-form-item>
                <el-form-item label="生产企业">
                    <el-input  v-model="ruleForm.manufacturingEnterprise" clearable
                        style="width: 187px;"></el-input>
                </el-form-item>
                <el-form-item label="日期" v-if="activeName != 1">
                    <el-date-picker  v-model="time" type="daterange" :unlink-panels="true"
                        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd">
                    </el-date-picker>
                </el-form-item>
                <div></div>
                <template v-if="activeName != 2">
                    <el-form-item label="购进渠道">
                        <el-input  v-model="ruleForm.purchasingChannels" clearable
                            style="width: 187px;"></el-input>
                    </el-form-item>
                    <el-form-item label="批准文号">
                        <el-input  v-model="ruleForm.approvalNumber" clearable
                            style="width: 187px;"></el-input>
                    </el-form-item>
                </template>
                <el-form-item label="股东单位">
                    <el-select  v-model="ruleForm.shareholderUnit" clearable placeholder="请选择"
                        style="width: 187px;">
                        <el-option v-for="item in primaryList" :key="item.value" :label="item.name" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="崇盛豫编码">
                    <el-input  v-model="ruleForm.primaryEncoding" clearable
                        style="width: 187px;"></el-input>
                </el-form-item>
               	<el-form-item>
                    <el-button style="background-color: #5CD8DA;border-color: #5CD8DA;padding: 10px 20px;" type="primary" @click="query()">查询</el-button>
				</el-form-item>
				<el-form-item>
                    <el-button style="background-color: #5CD8DA;border-color: #5CD8DA;padding: 10px 20px;" type="primary" 	@click="exportClick()">导出</el-button>
				</el-form-item>
            </div>
        </el-form>
        <div>
            <section>
                <template>
                    <template>
                        <template>
                            <el-table ref="multipleTable" :data="tableData[activeName].list" class="tableBox"
                                style="width: 100%;"
                              :header-cell-style="{
                        'text-align': 'center',
                        background: '#F6F7FB',
                        color: '#4B4B4B',
                        fontSize: '13px',
                    }" :cell-style="{ 'text-align': 'center' }" height="500px">
                                <el-table-column type="index" label="序号" width="50"></el-table-column>
                                <el-table-column label="崇盛豫编码" prop="primaryEncoding"></el-table-column>
                                <el-table-column label="股东单位" prop="shareholderUnit"></el-table-column>
                                <el-table-column label="门店" prop="store"></el-table-column>
                                <el-table-column label="营业员ID" prop="salespersonId"></el-table-column>
                                <el-table-column label="营业员" prop="salesClerk"></el-table-column>
                                <el-table-column label="日期" prop="salesDate"></el-table-column>
                                <el-table-column label="商品ID" prop="productId"></el-table-column>
                                <el-table-column label="商品名称" prop="productName"></el-table-column>
                                <el-table-column label="规格" prop="specifications"></el-table-column>
                                <el-table-column label="生产企业" prop="manufacturingEnterprise"></el-table-column>
                                <el-table-column label="最后购进渠道" prop="finalPurchasingChannel"></el-table-column>
                                <el-table-column label="最后进价" prop="finalPurchasePrice"></el-table-column>
                                <el-table-column label="零售价" prop="retailPrice"></el-table-column>
                                <el-table-column label="销售数量" prop="salesVolumes"></el-table-column>
                                <el-table-column label="实收金额" prop="actualReceivedAmount"></el-table-column>
                                <el-table-column label="销售成本" prop="costSales"></el-table-column>
                                <el-table-column label="毛利额" prop="grossProfitMargin"></el-table-column>
                                <el-table-column label="毛利率" prop="grossMargin"></el-table-column>
                                <el-table-column label="会员卡号" prop="membershipCardNumber"></el-table-column>
                                <el-table-column label="会员姓名" prop="memberName"></el-table-column>
                                <el-table-column label="电话" prop="phone"></el-table-column>
                                <el-table-column label="手机" prop="mobilePhone"></el-table-column>
                            </el-table>
                        </template>
                    </template>
                </template>

                <div class="pageClass">
                    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :page-size="tableData[activeName].pageSize" :current-page="tableData[activeName].pageNum"
                        :page-sizes="[100, 200, 400, 800, 1500]" layout="total, sizes, prev, pager, next"
                        :total="tableData[activeName].total">
                    </el-pagination>
                </div>
            </section>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
export default {
    data() {
        return {
            ruleForm: {
                productName: '',//商品名称
                manufacturingEnterprise: '',//生产企业
                startTime: '',//开始时间
                endTime: '',//结束时间
                purchasingChannels: '',
                approvalNumber: '',
                shareholderUnit: '',
                primaryEncoding: '',
                pageNum: '',
                pageSize: '',
            },
            time: [],
            tableData: [
                {
                    pageNum: 1,
                    pageSize: 100,
                    total: 0,
                    list: [],
                },
                {
                    pageNum: 1,
                    pageSize: 100,
                    total: 0,
                    list: [],
                },
                {
                    pageNum: 1,
                    pageSize: 100,
                    total: 0,
                    list: [],
                }
            ],
            primaryList: [
                { "name": "铁岭安康", "value": "tlak" },
                { "name": "丹东百盛", "value": "ddbs" },
                { "name": "心向民", "value": "xxm" },
                { "name": "国益堂", "value": "gyt" },
                { "name": "仁泽康桥", "value": "rzkq" },
                { "name": "凌源星河", "value": "lyxh" },
                { "name": "百合", "value": "bh" },
                { "name": "本溪城镇", "value": "bxcz" },
                { "name": "襄元堂", "value": "xyt" },
                { "name": "建昌医药", "value": "jcyy" },
                { "name": "白求恩", "value": "bqe" },
                { "name": "岫岩国泰", "value": "xygt" },
                { "name": "溥安堂", "value": "pat" },
                { "name": "益君堂", "value": "yjt" },
                { "name": "民生堂", "value": "mst" },
                { "name": "心心向民", "value": "xxxm" },
                { "name": "沈阳文泰", "value": "sywt" },
                { "name": "阳光新华", "value": "ygxh" },
                { "name": "电信", "value": "dx" }
            ],

            activeName: 2,
            fullscreenLoading: false,
        };
    },
    methods: {
        query() {
            // if (!this.ruleForm.productName && !this.ruleForm.manufacturingEnterprise) {
            // 	this.$message.warning({ message: '商品名称和生产企业不能同时为空!' })
            // 	return
            // }
            if (this.time) {
                this.ruleForm.startTime = this.time[0];
                this.ruleForm.endTime = this.time[1];
            } else {
                this.ruleForm.startTime = '';
                this.ruleForm.endTime = '';
            }
            // let start = new Date(this.ruleForm.startTime).getTime()
            // let end = new Date(this.ruleForm.endTime).getTime()
            // if (end - start > 24 * 60 * 60 * 1000 * 4) {
            // 	this.$message.warning({ message: '间隔时间不能大于五天' })
            // 	return
            // }
            let url = ''
            if (this.activeName == 0) url = '/find/rk';
            if (this.activeName == 1) url = '/find/kc';
            if (this.activeName == 2) url = '/find/mdxs';
            this.ruleForm.pageNum = this.tableData[this.activeName].pageNum;
            this.ruleForm.pageSize = this.tableData[this.activeName].pageSize;
            this.fullscreenLoading = true;
            axios.defaults.timeout = 1000 * 60 * 60 * 5;
            axios.post(window.PLATFROM_CONFIG.url + url, this.ruleForm).then(res => {
                if (res.data.code == 200) {
                    this.tableData[this.activeName].list = res.data.data.records;
                    this.tableData[this.activeName].total = res.data.data.total;
                    this.fullscreenLoading = false;
                } else {
                    this.fullscreenLoading = false;
                }
            }).catch(res => {
                this.$message({
                    duration: 0,
                    showClose: true,
                    message: '处理失败，请稍后重试',
                    type: 'error'
                });
                this.fullscreenLoading = false;
            })
        },
        exportClick() {
            // if (!this.ruleForm.productName) {
            // 	this.$message.warning({ message: '请输入商品名称' })
            // 	return
            // }
            // if (this.time.length == 0 && this.activeName != 1) {
            // 	this.$message.warning({ message: '请选择日期' })
            // 	return
            // }
            if (this.time) {
                this.ruleForm.startTime = this.time[0];
                this.ruleForm.endTime = this.time[1];
            } else {
                this.ruleForm.startTime = '';
                this.ruleForm.endTime = '';
            }

            let link = ''
            if (this.activeName == 0) link = '/find/rkExport?json=';
            if (this.activeName == 1) link = '/find/kcExport?json=';
            if (this.activeName == 2) link = '/find/mdxsExport?json=';
            var Json = JSON.stringify(this.ruleForm)
            const url = window.PLATFROM_CONFIG.url + link + Json;
            window.open(url, '_blank');
            this.$message.success('导出成功');
        },
        handleClick(tab, event) {
            this.activeName = tab.name;
        },
        handleSizeChange(val) {
            this.tableData[this.activeName].pageSize = val;
            this.query()
        },
        handleCurrentChange(val) {
            this.tableData[this.activeName].pageNum = val;
            this.query()
        },
    }
}
</script>

<style scoped>
.dashboard-content {
    background: #fff;
    padding: 20px;
    margin: 30px 25px;

}

.dashboard-btn-wrap {
    text-align: left;
    padding: 10px 0;
}

.dashboard-button {
    width: 80px;
}

.pageClass {
    text-align: center;
    padding: 20px 0;
}
</style>